<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"壳"佳人</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- Add your keywords and description here for SEO. -->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/png" href="images/favicon.png"/>

    <!-- Uncomment this if you need apple touch icon. -->
    <!--
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    -->

    <!-- Don't delete this. It's needed for development workflow. -->
    <link rel="stylesheet" href="stylesheets/bundle.css">
</head>

<body>
<div class="loading-overlay" id="loading-overlay">
    <img src="images/loading.svg">
</div>
<div class="sharearrow" id="sharearrow">
    <img src="./images/arrow.png">
</div>
<div class="swiper-container" id="swiper-container">

    <div class="swiper-wrapper">
        <div class="swiper-slide slide-0">
            <img class="logo" src="./images/logo.png">
            <div class="head">
                <img class="bg-group" src="./images/group.png">
            </div>
            <div class="body">
                <div class="box">
                    <div class="boxTitle">"壳"佳人，真我范</div>
                    <div class="txt">
                        职场无凡女，处处有佳人，<br>
                        壳牌每天迎接着无数职场佳人的到来，<br>
                        看他们诠释自我，看她们光芒万丈，<br>
                        你是哪种的"壳"佳人？一测便知！
                    </div>
                    <div class="boxBtn">立 刻 参 与</div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slide-1" draggable="false">
            <img class="bgimg1" src="https://easygoo.com.cn/ke/images/bg.png">
            <div draggable="false" class="item-image title" data-ani-name="slideInLeft" data-ani-duration="1s"
                 data-ani-delay="0s">
                <div class="txt">
                    <div class="wh">?</div>
                    <div class="detail">怎样才算的上一名<br>成功的职业女性？</div>
                </div>
            </div>
            <div class="animated small-btn" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">
                <div class="leftbtnA border cback1">
                    <div class="wh2">A</div>
                    <div class="detail2">努力奋斗，<br>稳步晋升，<br>高处风景特别美。</div>
                </div>
                <div class="rightbtnB border cnext1">
                    <div class="wh2">B</div>
                    <span class="detail2">事业、家庭还有<br>自己的生活，<br>统统Hold的住。</span>
                </div>
            </div>
            <div class="animated btns">
                <div class="backbtn ">后退</div>
                <div class="nextbtn next1">确定</div>
            </div>
        </div>
        <div class="swiper-slide slide-2">
            <img class="bgimg1" src="https://easygoo.com.cn/ke/images/bg.png">
            <div class="item-image animated title" data-ani-name="slideInLeft" data-ani-duration="1s"
                 data-ani-delay="0s">
                <div class="txt">
                    <div class="wh">?</div>
                    <div class="detail">女王节快到了<br>你将如何度过这一天</div>
                </div>
            </div>
            <div class="animated small-btn" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">
                <div class="leftbtnA border cback2">
                    <div class="wh2">A</div>
                    <div class="detail2">公司就是我的<br>主场，女王节当然是<br>用心工作啦！</div>
                </div>
                <div class="rightbtnB border cnext2">
                    <div class="wh2">B</div>
                    <div class="detail2">女王节就当回女王吧<br>给自己放个假，<br>享受一下。</div>
                </div>
            </div>
            <div class="animated btns">
                <div class="backbtn">后退</div>
                <div class="nextbtn next2">确定</div>
            </div>
        </div>
        <div class="swiper-slide slide-3">
            <img class="bgimg1" src="https://easygoo.com.cn/ke/images/bg.png">
            <div class="item-image animated title" data-ani-name="slideInLeft" data-ani-duration="1s"
                 data-ani-delay="0s">
                <div class="txt">
                    <div class="wh">?</div>
                    <div class="detail">公司年会上<br>你最期待的环节是？</div>
                </div>
            </div>
            <div class="animated small-btn" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">
                <div class="leftbtnA border cback3">
                    <div class="wh2">A</div>
                    <div class="detail2">表彰与抽奖，<br>万一就成为锦鲤了呢</div>
                </div>
                <div class="rightbtnB border cnext3">
                    <div class="wh2">B</div>
                    <div class="detail2">歌舞表演<br>我要上台当C位！</div>
                </div>
            </div>
            <div class="animated btns">
                <div class="backbtn">后退</div>
                <div class="nextbtn next3">确定</div>
            </div>
        </div>
        <div class="swiper-slide slide-4" id="shot">
            <img class="headImg" id="headImg"
                 src="">
            <img id="resultImg" src="./images/1.png">
            <div class="animated btns2" id="btns">
                <div class="btn aboutmore">了解更多</div>
                <div class="btn share">分享</div>
                <div class="btn save">保存</div>
            </div>
        </div>
    </div>
</div>

<div id="popWindow" class="popWindow" style="display: none;">
</div>
<div id="maskLayer" class="maskLayer" style="display: none;">
    <img class="qrcode" src="./images/qrcode.jpeg">
    <label>长按图中二维码获取<br>更多详情</label>
</div>

<div id="sharewindow" class="sharewindow" style="display: none;">

    <label>点击右上角分享按钮分享至朋友圈</label>
</div>

<!--<button class="up-arrow">-->
<!--<i class="icon-angle-double-up"></i>-->
<!--</button>-->

<button id="btn-music" class="btn-music">
    <i class="icon-note"></i>
</button>

<audio loop>
    <source src="./audios/background.mp3" type="audio/mpeg">
</audio>

<!-- Don't delete this. It's needed for development workflow. -->
<script src="javascripts/bundle.js"></script>
<div id="canvas" class="canvas">
    <img id="canvasimg" src="">
    <div class="label">
        <div>长按图片保存至本地相册，<br>把测试结果分享到朋友圈吧！</div>
    </div>
</div>

</body>

</html>